import { Card } from 'flowbite-react'
import { FaBrain, FaClock, FaChartLine, FaCheckCircle } from 'react-icons/fa'

export default function AnkiIntro() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
      <Card>
        <div className="flex items-center gap-3">
          <FaBrain className="text-2xl text-blue-500" />
          <div>
            <h3 className="font-semibold text-gray-900">间隔重复</h3>
            <p className="text-sm text-gray-600">科学的记忆方法，在最佳时间复习</p>
          </div>
        </div>
      </Card>

      <Card>
        <div className="flex items-center gap-3">
          <FaClock className="text-2xl text-green-500" />
          <div>
            <h3 className="font-semibold text-gray-900">高效学习</h3>
            <p className="text-sm text-gray-600">每天只需复习到期卡片，节省时间</p>
          </div>
        </div>
      </Card>

      <Card>
        <div className="flex items-center gap-3">
          <FaChartLine className="text-2xl text-purple-500" />
          <div>
            <h3 className="font-semibold text-gray-900">智能调整</h3>
            <p className="text-sm text-gray-600">根据学习效果自动调整复习间隔</p>
          </div>
        </div>
      </Card>

      <Card>
        <div className="flex items-center gap-3">
          <FaCheckCircle className="text-2xl text-orange-500" />
          <div>
            <h3 className="font-semibold text-gray-900">长期记忆</h3>
            <p className="text-sm text-gray-600">将知识牢固存入长期记忆</p>
          </div>
        </div>
      </Card>
    </div>
  )
}